<template>
  <div class="main">
    <section>
      <div v-if="rightsButtons['add']" class="btn-block">
        <el-button type="success" icon="el-icon-plus" @click="showAdd">新建</el-button>
      </div>
      <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" header-row-class-name="table-header" border highlight-current-row>
        <el-table-column align="center" label="序号" type="index" width="55"></el-table-column>
        <el-table-column align="center" label="爆品ID" prop="hotCode"></el-table-column>
        <el-table-column align="center" label="开始时间">
          <template slot-scope="scope">
            <span v-text="formatDate(scope.row.startTime, 'YYYY-MM-DD HH:mm:ss')"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束时间">
          <template slot-scope="scope">
            <span v-text="formatDate(scope.row.endTime, 'YYYY-MM-DD HH:mm:ss')"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否启用" width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="updateStatus(scope.row, scope.$index)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="0"
              :disabled="!rightsButtons['operate']">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" v-if="rightsButtons['edit'] || rightsButtons['manage']">
          <template slot-scope="scope">
            <el-button v-if="rightsButtons['edit']" type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
            <router-link v-if="rightsButtons['manage']" :to="{name: 'b-superManage', params: {id: scope.row.id}}">
              <el-button type="primary" plain size="mini">商品管理</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" v-if="listTotal > 0">
        <el-pagination @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" :current-page.sync="listQuery.pageNum" :page-size="listQuery.pageSize" :total="listTotal" layout="total, prev, pager, next, sizes, jumper"></el-pagination>
      </div>
    </section>
    
    <el-dialog :title="editItem.id ? '编辑秒杀' : '新建秒杀'" :visible.sync="showEditPop">
      <el-form :model="editItem" :rules="editRule" size="medium" ref="editItem" label-width="120px">
        <el-form-item label="起止时间:" prop="timeRange">
          <el-date-picker
            v-model="editItem.timeRange"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否启用:" prop="status">
          <el-switch
            v-model="editItem.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
        <el-button @click="showEditPop = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'b-super',
    data () {
      return {
        listLoading: false,
        listQuery: {
          pageNum: 1,
          pageSize: 10
        },
        list: [],
        listTotal: 0,
        showEditPop: false,
        btnDisabled: false,
        editItem: {
          timeRange: [],
          status: 0
        },
        editRule: {
          status: [{required: true, message: '不能为空', trigger: 'blur'}],
          timeRange: [{required: true, message: '不能为空', type: 'array', trigger: 'change'}]
        }
      }
    },
    created () {
      this.getList();
    },
    methods: {
        getList () {
          this.listLoading = true;
          this.request({
            url: '/bihs/super-hot/search',
            method: 'post',
            data: this.listQuery
          }).then(({data}) => {
            this.list = data.list
            this.listTotal = data.total
            this.listLoading = false
          }).catch(err => {
            console.log(err)
            this.list = []
            this.listTotal = 0
            this.listLoading = false
          });
        },
        updateStatus (item, index) {
          this.request({
            url: '/bihs/super-hot/switch',
            method: 'post',
            data: item
          }).then((res) => {
            this.$message.success(item.status === 1 ? '启用成功' : '禁用成功')
          }).catch(err => {
            this.$set(this.list[index], 'status', 0)
            console.log(err)
          });
        },
        showAdd () {
          this.editItem = {
            timeRange: [],
            status: 0
          };
          this.showEditPop = true;
          this.btnDisabled = false;
          this.$nextTick(() => {
            this.$refs['editItem'].clearValidate()
          })
        },
        showEdit (item) {
          this.editItem = {
            ...item,
            timeRange: [item.startTime, item.endTime]
          };
          this.showEditPop = true;
          this.btnDisabled = false;
        },
        save () {
          this.$refs.editItem.validate(valid => {
            if (!valid) {
              return false
            }
            let timeRange = this.editItem.timeRange
            if (timeRange && timeRange.length > 0) {
              this.editItem.startTime = this.formatDate(timeRange[0], 'YYYY-MM-DD HH:mm:ss')
              this.editItem.endTime = this.formatDate(timeRange[1], 'YYYY-MM-DD HH:mm:ss')
            }
            this.btnDisabled = true;
            this.request({
              url: '/bihs/super-hot/saveOrUpdate',
              method: 'post',
              data: this.editItem
            }).then(() => {
              this.btnDisabled = false;
              this.editItem = {};
              this.showEditPop = false;
              this.$message.success('保存成功');
              this.getList();
            }).catch(err => {
              this.btnDisabled = false;
            });
          });
        },
        handleCurrentChange (val) {
          this.listQuery.pageNum = val
          this.getList()
        },
        handleSizeChange (val) {
          this.listQuery.pageSize = val
          this.getList()
        }
    }
  }
</script>
